<template>
    <div class="app-container">
        <!--  搜索栏  -->
        <el-form :model="queryParams" ref="queryForm" v-show="showSearch" :inline="true" label-width="100px">

            <el-form-item label="字典类型" prop="dictType">
                <el-select v-model="queryParams.pcode" size="small">
                    <el-option
                            v-for="item in basicType"
                            :key="item.id"
                            :label="item.name"
                            :value="item.code"
                    />
                </el-select>
            </el-form-item>

            <el-form-item label="字典名称" prop="name">
                <el-input
                        v-model="queryParams.name"
                        placeholder="请输入字典名称"
                        clearable
                        size="small"
                />
            </el-form-item>

            <el-form-item label="字典编号" prop="code">
                <el-input
                        v-model="queryParams.code"
                        placeholder="请输入完整编号"
                        clearable
                        size="small"
                />
            </el-form-item>

            <el-form-item>
                <el-button type="primary" icon="el-icon-search" size="mini"  @click="getLevelThreedata">搜索</el-button>
                <el-button icon="el-icon-refresh" size="mini"  @click="resetQuery" >重置</el-button>
            </el-form-item>
        </el-form>

        <el-row :gutter="10" class="mb8">
            <el-col :span="1.5">
                <el-button
                        type="primary"
                        icon="el-icon-plus"
                        size="mini"
                        @click="handleDictData"
                >新增</el-button>
            </el-col>
            <right-toolbar :showSearch.sync="showSearch" @queryTable="getLevelThreedata"></right-toolbar>
        </el-row>

        <el-table v-loading="loading" :data="basicData.slice((currentPage-1)*pageSize,currentPage*pageSize)" >
            <el-table-column align="center" type="index" label="序号" ></el-table-column>
            <el-table-column label="中文名称" align="center" prop="name"  />
            <el-table-column label="英文名称" align="center" prop="enName"  />
            <el-table-column label="编号" align="center" prop="code" />
            <el-table-column label="创建时间" align="center" prop="creationDate" width="180">
                <template slot-scope="scope">
                    <span>{{ parseTime(scope.row.creationDate) }}</span>
                </template>
            </el-table-column>
            <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
                <template slot-scope="scope">
                    <el-button
                            size="mini"
                            type="text"
                            icon="el-icon-edit"
                            @click="handleEdit(scope.row)"
                    >编辑</el-button>
                    <el-button
                            size="mini"
                            type="text"
                            icon="el-icon-delete"
                            @click="onDelete(scope.row.id)"
                    >删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <pagination
                v-show="basicData.length>0"
                :total="basicData.length"
                :page.sync="currentPage"
                :limit.sync="pageSize"
        />

        <!-- 添加字典类型对象 -->
        <el-dialog :title="title" :visible.sync="open" v-if="open" width="30%" append-to-body>
            <el-tabs>
                <dict-data-form :dictDataForm="dictDataForm"  @submitForm="getLevelThreedata" @cancelDialog="cancel"></dict-data-form>
            </el-tabs>
        </el-dialog>
    </div>
</template>

<script>
    import {getLevelThreeType, deleteLevelTwoType, getLevelTwoType} from '@/api/basicdata/basictype'
    import dictDataForm from "./form/dictDataForm";
    export default {
        name: "dictData",
        components: {
            dictDataForm,
        },
        data() {
            return {
                // 遮罩层
                loading: false,
                // 显示搜索条件
                showSearch: true,
                // 弹出层标题
                title: "",
                // 是否显示弹出层
                open: false,
                // 分页
                currentPage: 1,
                currentIndex: '',
                pageSize: 10,
                // 查询参数
                queryParams: {
                    name: undefined,
                    code: undefined,
                    typeId: undefined,
                    pcode: '0',
                },

                // 字典类型查询参数
                twoQueryParams: {
                    typeId: undefined,
                    pcode: '0',
                },
                // 字典类型
                basicType: [],
                // 字典数据
                basicData: [],
                // 字典数据表单
                dictDataForm:{
                    code: '',
                    name: '',
                    enName: '',
                    pcode: '0',
                    typeId: undefined,
                    status: '1',
                    id: undefined
                },


            }
        },
        created() {
            const typeId = this.$route.params && this.$route.params.typeId;
            const code = this.$route.params && this.$route.params.code;
            // 初始化查询字典数据参数
            this.queryParams.typeId = typeId;
            this.queryParams.pcode = code
            // 初始化查询字典类型参数
            this.twoQueryParams.typeId = typeId;
            // 初始化添加字典数据参数
            this.dictDataForm.typeId = typeId;
            this.dictDataForm.pcode = code;
            // 初始化二级字典类型
            this.initLevelTwodata();
            // 初始化三级字典数据
            this.getLevelThreedata();
        },
        methods: {
            /** 获取字典类型 */
            initLevelTwodata() {
                const data = {
                    'searchParams': this.twoQueryParams
                }
                getLevelTwoType(data).then(res => {
                    this.basicType = res.responseBody.result
                })
            },

            /** 获取字典三级数据 */
            getLevelThreedata() {
                this.loading = true
                const data = {
                    'searchParams': this.queryParams
                }
                getLevelThreeType(data).then(res => {
                    this.basicData = res.responseBody.result
                    // 更新字典类型
                    this.dictDataForm.pcode = this.queryParams.pcode;
                    this.loading = false
                })
            },

            /** 新增业务对象按钮操作 */
            handleDictData() {
                this.open = true;
                this.title = "添加字典数据";
            },

            /** 修改业务对象按钮操作 */
            handleEdit(row) {
                this.dictDataForm.id = row.id
                this.dictDataForm.code = row.code
                this.dictDataForm.enName = row.enName
                this.dictDataForm.name = row.name
                this.open = true;
                this.title = "编辑字典数据";
            },

            /** 删除按钮操作 */
            onDelete(id) {
                this.$confirm('确定要删除吗?', "警告", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning"
                }).then(function() {
                    return deleteLevelTwoType(id);
                }).then(res => {
                    if (res.retCode === '200') {
                        this.$message.success('删除成功')
                        this.getLevelThreedata();
                    } else {
                        // console.log(res)
                        this.$message.error('删除失败' + res.retCode)
                    }
                })
            },

            /** 重置按钮操作 */
            resetQuery() {
                this.resetForm("queryForm");
                this.getLevelThreedata();
            },

            // 取消按钮
            cancel() {
                this.open = false;
                this.title = '';
                this.dictDataForm.id = undefined;
                this.dictDataForm.code = '';
                this.dictDataForm.name = '';
                this.dictDataForm.enName = '';
            },
        }
    }


</script>
